﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<InternshipManagement.Models.CalendarEvent>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Calendar
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/CalendarEvent.js" type="text/javascript"></script>
    <div id="calendartoolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
			<button id="BtnPreviousMonth">Previous Month</button>
			<button id="BtnNextMonth">Next Month</button>
			&nbsp;&nbsp;&nbsp;
			Date: <input type="text" id="dateSelect" size="10"/>
			&nbsp;&nbsp;&nbsp;
		</div>

		<br/>

		<!--
		You can use pixel widths or percentages. Calendar will auto resize all sub elements.
		Height will be calculated by aspect ratio. Basically all day cells will be as tall
		as they are wide.
		-->
		<div id="mycal"></div>

		<!-- debugging-->
		<div id="calDebug"></div>

		<!-- Add event modal form -->
		<div id="add-event-form" title="Add New Event">
			<p class="validateTips">All form fields are required.</p>
			<form action="#">
			<fieldset class="calendarset">
                <%: Html.Label("Course") %>
			    <%: Html.DropDownList("CourseID", new SelectList(ViewBag.Courses, "CourseID", "DisplayName"), new {@class="text ui-widget-content ui-corner-all", onChange = "FillStudents();", style = "margin-bottom:12px; width:95%; padding: .4em;" })%>
                <%: Html.Label("Student") %>
			    <%: Html.DropDownList("UserID", new SelectList(ViewBag.Students, "ID", "DisplayName"), "All", new { @class = "text ui-widget-content ui-corner-all", style = "margin-bottom:12px; width:95%; padding: .4em;" })%>
				<label for="name">Event</label>
                <select id="eventType" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;" onchange="if($('#eventType').val()=='Other') $('#eventTitle').show();else $('#eventTitle').hide();">
                    <option value="Initial Meeting With Students">Initial Meeting With Students</option>
                    <option value="Submission of Application Form">Submission of Application Form</option>
                    <option value="Submission of Company Information Form">Submission of Company Information Form</option>
                    <option value="End of Internship">End of Internship</option>
                    <option value="Submission of Internship Report">Submission of Internship Report</option>
                    <option value="Jury Date">Jury Date</option>
                    <option value="Other">Other</option>
                </select>
				<input type="text" name="eventTitle" id="eventTitle" class="text ui-widget-content ui-corner-all" style="display:none;margin-bottom:12px; width:95%; padding: .4em;"/>
                <textarea rows="5" cols="15" name="eventMessage" id="eventMessage" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"></textarea>
				<table style="width:100%; padding:5px;">
					<tr>
						<td>
							<label>Event Date</label>
							<input type="text" name="startDate" id="startDate" value="" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/>				
						</td>
						<td>&nbsp;</td>
						<td>
							<label>Event Hour</label>
							<select id="startHour" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
                                <% for (int i = 0; i < 24; i++)
                                   { %>
								    <option value="<%= i %>" <%= i == 9 ? @"selected=""SELECTED""" : "" %>><%= i %></option>
                                <% } %>
							</select>				
						</td>
						<td>
							<label>Event Minute</label>
							<select id="startMin" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
								<option value="00" selected="SELECTED">00</option>
								<option value="10">10</option>
								<option value="20">20</option>
								<option value="30">30</option>
								<option value="40">40</option>
								<option value="50">50</option>
							</select>				
						</td>
					</tr>			
				</table>
				<table>
					<tr>
						<td>
							<label>Background Color</label>
						</td>
						<td>
							<div id="colorSelectorBackground"><div style="background-color: #333333; width:30px; height:30px; border: 2px solid #000000;"></div></div>
							<input type="hidden" id="colorBackground" value="#333333"/>
						</td>
						<td>&nbsp;&nbsp;&nbsp;</td>
						<td>
							<label>Text Color</label>
						</td>
						<td>
							<div id="colorSelectorForeground"><div style="background-color: #ffffff; width:30px; height:30px; border: 2px solid #000000;"></div></div>
							<input type="hidden" id="colorForeground" value="#ffffff"/>
						</td>						
					</tr>				
				</table>
			</fieldset>
			</form>
		</div>
		
		<div id="display-event-form" title="View Agenda Item">

		</div>		

		<p>&nbsp;</p>

        <script type="text/javascript">
        var clickDate = "";
    var clickAgendaItem = "";
        function FillStudents(){
            var students = $('#UserID');
            students.empty();
            students.append(
                    $('<option/>', {
                                    value: ''
                                   }).html("All")
                    );
            $.getJSON('<%=Url.Action("FindStudentsByCourseID", "Account")%>'+"?CourseID="+$('#CourseID').val(), function(result) {  
                $(result).each(function() {
                students.append(
                    $('<option/>', {
                                    value: this.ID
                                   }).html(this.DisplayName)
                    );
                    if(clickAgendaItem != null && clickAgendaItem.data.UserID != null)
                    $("#UserID").val(clickAgendaItem.data.UserID);
                    else
                    $("#UserID").val('');
                });
            });
        }
        $(document).ready(function () {

    

    /**
    * Initializes calendar with current year & month
    * specifies the callbacks for day click & agenda item click events
    * then returns instance of plugin object
    */
    var jfcalplugin = $("#mycal").jFrontierCal({
        date: new Date(),
        dayClickCallback: myDayClickHandler,
        agendaClickCallback: myAgendaClickHandler,
        agendaDropCallback: myAgendaDropHandler,
        agendaMouseoverCallback: myAgendaMouseoverHandler,
        applyAgendaTooltipCallback: myApplyTooltip
    }).data("plugin");


    /**
    * Do something when dragging starts on agenda div
    */
    function myAgendaDragStart(eventObj, divElm, agendaItem) {
        // destroy our qtip tooltip
        if (divElm.data("qtip")) {
            divElm.qtip("destroy");
        }
    };

    /**
    * Do something when dragging stops on agenda div
    */
    function myAgendaDragStop(eventObj, divElm, agendaItem) {
        //alert("drag stop");
    };

    /**
    * Custom tooltip - use any tooltip library you want to display the agenda data.
    * for this example we use qTip - http://craigsworks.com/projects/qtip/
    *
    * @param divElm - jquery object for agenda div element
    * @param agendaItem - javascript object containing agenda data.
    */
    function myApplyTooltip(divElm, agendaItem) {

        // Destroy currrent tooltip if present
        if (divElm.data("qtip")) {
            divElm.qtip("destroy");
        }

        var displayData = "";

        var title = agendaItem.title;
        var startDate = agendaItem.startDate;
        var allDay = agendaItem.allDay;
        var data = agendaItem.data;
        displayData += "<br><b>" + title + "</b><br><br>";
        if (allDay) {
            displayData += "(All day event)<br><br>";
        } else {
            displayData += "<b>Event Date:</b> " + startDate + "<br>";
        }
        if(data["Message"]!='null' && data["Message"]!=null)
            displayData += "<b>" + "Message" + ":</b> " + data["Message"] + "<br>";
        if(data["Course"]!=null)
            displayData += "<b>" + "Course" + ":</b> " + data["Course"] + "<br>";
        if(data["User"]!='null' && data["User"]!=null)
            displayData += "<b>" + "User" + ":</b> " + data["User"] + "<br>";
        // use the user specified colors from the agenda item.
        var backgroundColor = agendaItem.displayProp.backgroundColor;
        var foregroundColor = agendaItem.displayProp.foregroundColor;
        var myStyle = {
            border: {
                width: 5,
                radius: 10
            },
            padding: 10,
            textAlign: "left",
            tip: true,
            name: "dark" // other style properties are inherited from dark theme		
        };
        if (backgroundColor != null && backgroundColor != "") {
            myStyle["backgroundColor"] = backgroundColor;
        }
        if (foregroundColor != null && foregroundColor != "") {
            myStyle["color"] = foregroundColor;
        }
        // apply tooltip
        divElm.qtip({
            content: displayData,
            position: {
                corner: {
                    tooltip: "bottomMiddle",
                    target: "topMiddle"
                },
                adjust: {
                    mouse: true,
                    x: 0,
                    y: -15
                },
                target: "mouse"
            },
            show: {
                when: {
                    event: 'mouseover'
                }
            },
            style: myStyle
        });

    };

    /**
    * Make the day cells roughly 3/4th as tall as they are wide. this makes our calendar wider than it is tall. 
    */
    jfcalplugin.setAspectRatio("#mycal", 0.75);

    /**
    * Called when user clicks day cell
    * use reference to plugin object to add agenda item
    */
    function myDayClickHandler(eventObj) {
        // Get the Date of the day that was clicked from the event object
        var date = eventObj.data.calDayDate;
        // store date in our global js variable for access later
        clickDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        // open our add event dialog
        $('#add-event-form').dialog('open');
    };

    /**
    * Called when user clicks and agenda item
    * use reference to plugin object to edit agenda item
    */
    function myAgendaClickHandler(eventObj) {
        // Get ID of the agenda item from the event object
        var agendaId = eventObj.data.agendaId;
        // pull agenda item from calendar
        var agendaItem = jfcalplugin.getAgendaItemById("#mycal", agendaId);
        clickAgendaItem = agendaItem;
        $("#display-event-form").dialog('open');
    };

    /**
    * Called when user drops an agenda item into a day cell.
    */
    function myAgendaDropHandler(eventObj) {
        // Get ID of the agenda item from the event object
        var agendaId = eventObj.data.agendaId;
        // date agenda item was dropped onto
        var date = eventObj.data.calDayDate;
        // Pull agenda item from calendar
        var agendaItem = jfcalplugin.getAgendaItemById("#mycal", agendaId);
        alert("You dropped agenda item " + agendaItem.title +
			" onto " + date.toString() + ". Here is where you can make an AJAX call to update your database.");
    };

    /**
    * Called when a user mouses over an agenda item	
    */
    function myAgendaMouseoverHandler(eventObj) {
        var agendaId = eventObj.data.agendaId;
        var agendaItem = jfcalplugin.getAgendaItemById("#mycal", agendaId);
        //alert("You moused over agenda item " + agendaItem.title + " at location (X=" + eventObj.pageX + ", Y=" + eventObj.pageY + ")");
    };
    /**
    * Initialize jquery ui datepicker. set date format to yyyy-mm-dd for easy parsing
    */
    $("#dateSelect").datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm-dd'
    });

    /**
    * Set datepicker to current date
    */
    $("#dateSelect").datepicker('setDate', new Date());
    /**
    * Use reference to plugin object to a specific year/month
    */
    $("#dateSelect").bind('change', function () {
        var selectedDate = $("#dateSelect").val();
        var dtArray = selectedDate.split("-");
        var year = dtArray[0];
        // jquery datepicker months start at 1 (1=January)		
        var month = dtArray[1];
        // strip any preceeding 0's		
        month = month.replace(/^[0]+/g, "")
        var day = dtArray[2];
        // plugin uses 0-based months so we subtrac 1
        jfcalplugin.showMonth("#mycal", year, parseInt(month - 1).toString());
    });
    /**
    * Initialize previous month button
    */
    $("#BtnPreviousMonth").button();
    $("#BtnPreviousMonth").click(function () {
        jfcalplugin.showPreviousMonth("#mycal");
        // update the jqeury datepicker value
        var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
        var cyear = calDate.getFullYear();
        // Date month 0-based (0=January)
        var cmonth = calDate.getMonth();
        var cday = calDate.getDate();
        // jquery datepicker month starts at 1 (1=January) so we add 1
        $("#dateSelect").datepicker("setDate", cyear + "-" + (cmonth + 1) + "-" + cday);
        return false;
    });
    /**
    * Initialize next month button
    */
    $("#BtnNextMonth").button();
    $("#BtnNextMonth").click(function () {
        jfcalplugin.showNextMonth("#mycal");
        // update the jqeury datepicker value
        var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
        var cyear = calDate.getFullYear();
        // Date month 0-based (0=January)
        var cmonth = calDate.getMonth();
        var cday = calDate.getDate();
        // jquery datepicker month starts at 1 (1=January) so we add 1
        $("#dateSelect").datepicker("setDate", cyear + "-" + (cmonth + 1) + "-" + cday);
        return false;
    });

    /**
    * Initialize delete all agenda items button
    */
    $("#BtnDeleteAll").button();
    $("#BtnDeleteAll").click(function () {
        jfcalplugin.deleteAllAgendaItems("#mycal");
        return false;
    });

    /**
    * Initialize iCal test button
    */
    $("#BtnICalTest").button();
    $("#BtnICalTest").click(function () {
        // Please note that in Google Chrome this will not work with a local file. Chrome prevents AJAX calls
        // from reading local files on disk.		
        jfcalplugin.loadICalSource("#mycal", $("#iCalSource").val(), "html");
        return false;
    });

    /**
    * Initialize add event modal form
    */
    $("#add-event-form").dialog({
        autoOpen: false,
        height: 500,
        width: 400,
        modal: true,
        buttons: {
            'Add Event': function () {

                $("#add-event-form").dialog("disable");
                $(".ui-dialog-buttonpane button:contains('Add Event')").button("disable");

                var eventTitle = jQuery.trim($("#eventType").val());
                var eventMessage = jQuery.trim($("#eventMessage").val());
                alert(eventMessage);
                if($("#eventType").val() == 'Other')
                    eventTitle = jQuery.trim($("#eventTitle").val());

                if (eventTitle == "") {
                    alert("Please enter a short event description into the \"Event\" field.");
                } else {

                    var startDate = $("#startDate").val();
                    var startDtArray = startDate.split("-");
                    var startYear = startDtArray[0];
                    // jquery datepicker months start at 1 (1=January)		
                    var startMonth = startDtArray[1];
                    var startDay = startDtArray[2];
                    // strip any preceeding 0's		
                    startMonth = startMonth.replace(/^[0]+/g, "");
                    startDay = startDay.replace(/^[0]+/g, "");
                    var startHour = jQuery.trim($("#startHour").val());
                    var startMin = jQuery.trim($("#startMin").val());
                    startHour = parseInt(startHour.replace(/^[0]+/g, ""));
                    if (startMin == "0" || startMin == "00") {
                        startMin = 0;
                    } else {
                        startMin = parseInt(startMin.replace(/^[0]+/g, ""));
                    }

                    /*
                    var endDate = $("#endDate").val();
                    var endDtArray = endDate.split("-");
                    var endYear = endDtArray[0];
                    // jquery datepicker months start at 1 (1=January)		
                    var endMonth = endDtArray[1];
                    var endDay = endDtArray[2];
                    // strip any preceeding 0's		
                    endMonth = endMonth.replace(/^[0]+/g, "");

                    endDay = endDay.replace(/^[0]+/g, "");
                    var endHour = jQuery.trim($("#endHour").val());
                    var endMin = jQuery.trim($("#endMin").val());
                    endHour = parseInt(endHour.replace(/^[0]+/g, ""));
                    if (endMin == "0" || endMin == "00") {
                        endMin = 0;
                    } else {
                        endMin = parseInt(endMin.replace(/^[0]+/g, ""));
                    }
                    */
                    //alert("Start time: " + startHour + ":" + startMin + " " + startMeridiem + ", End time: " + endHour + ":" + endMin + " " + endMeridiem);

                    // Dates use integers
                    var startDateObj = new Date(parseInt(startYear), parseInt(startMonth) - 1, parseInt(startDay), startHour, startMin, 0, 0);
                    var endDateObj = startDateObj;//new Date(parseInt(endYear), parseInt(endMonth) - 1, parseInt(endDay), endHour, endMin, 0, 0);

                    var json = $.toJSON({ Title: "",
                        Title: eventTitle,
                        StartDate: startDateObj,
                        EndDate: endDateObj,
                        BGColor: $("#colorBackground").val(),
                        TextColor: $("#colorForeground").val(),
                        EventID: clickAgendaItem.data == null ? 0 : clickAgendaItem.data.EventID,
                        CourseID: clickAgendaItem.data == null ? $("#CourseID").val() : clickAgendaItem.data.CourseID,
                        UserID:clickAgendaItem.data == null ? $("#UserID").val()==''?null:$("#UserID").val(): clickAgendaItem.data.UserID,
                        Message:clickAgendaItem.data == null ? $("#eventMessage").val()==''?null:$("#eventMessage").val(): clickAgendaItem.data.Message,
                        EventType: $("#eventType").val()
                    });
                    
                    jQuery.ajax({
                        type: 'POST',
                        url: '<%= Url.Action("CreateEditEvent", "CalendarEvent") %>',
                        data: json,
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            if (data.Result == true) {
                                if (clickAgendaItem.data != null) {
                                    jfcalplugin.deleteAgendaItemById("#mycal", clickAgendaItem.agendaId);
                                }
                                jfcalplugin.addAgendaItem(
                                                "#mycal",
                                                eventTitle,
                                                startDateObj,
                                                endDateObj,
                                                false,
                                                {
                                                    Course:data.Course,
                                                    User:data.User,
                                                    CourseID: data.CourseID,
                                                    EventID: data.EventID,
                                                    UserID: data.UserID,
                                                    EventType: $("#eventType").val(),
                                                    Message:data.Message
                                                },
                                                {
                                                    backgroundColor: $("#colorBackground").val(),
                                                    foregroundColor: $("#colorForeground").val()
                                                }
                                );

                                $("#add-event-form").dialog('close');
                            }

                        },
                        statusCode: {
                            404: function () {
                                alert('page not found');
                            }
                        }
                    });

                    // add new event to the calendar


                }

            },
            Cancel: function () {
                $(this).dialog('close');
            }
        },
        open: function (event, ui) {
            // initialize start date picker
            $("#startDate").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'yy-mm-dd'
            });
            // initialize end date picker
            /*$("#endDate").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'yy-mm-dd'
            });*/
            // initialize with the date that was clicked
            $("#startDate").val(clickDate);
            //$("#endDate").val(clickDate);
            // initialize color pickers
            $("#colorSelectorBackground").ColorPicker({
                color: "#333333",
                onShow: function (colpkr) {
                    $(colpkr).css("z-index", "10000");
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $("#colorSelectorBackground div").css("backgroundColor", "#" + hex);
                    $("#colorBackground").val("#" + hex);
                }
            });
            //$("#colorBackground").val("#1040b0");		
            $("#colorSelectorForeground").ColorPicker({
                color: "#ffffff",
                onShow: function (colpkr) {
                    $(colpkr).css("z-index", "10000");
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $("#colorSelectorForeground div").css("backgroundColor", "#" + hex);
                    $("#colorForeground").val("#" + hex);
                }
            });

            $("#startHour option:eq(9)").attr("selected", "selected");
            $("#endHour option:eq(9)").attr("selected", "selected");
            //$("#colorForeground").val("#ffffff");				
            // put focus on first form input element
            $("#eventTitle").focus();
            $("#colorBackground").val("#1040b0");
            $("#colorForeground").val("#ffffff");
        },
        close: function () {
            // reset form elements when we close so they are fresh when the dialog is opened again.
            $("#startDate").datepicker("destroy");
            //$("#endDate").datepicker("destroy");
            $("#startDate").val("");
            //$("#endDate").val("");
            $("#startHour option:eq(9)").attr("selected", "selected");
            $("#startMin option:eq(0)").attr("selected", "selected");
            //$("#endHour option:eq(9)").attr("selected", "selected");
            //$("#endMin option:eq(0)").attr("selected", "selected");
            $("#eventTitle").val("");
            $("#eventMessage").val("");
            $("#eventTitle").hide();
            $("#add-event-form").dialog("enable");
            $(".ui-dialog-buttonpane button:contains('Add Event')").button("enable");
            //$("#colorBackground").val("#1040b0");
            //$("#colorForeground").val("#ffffff");
        }
    });

    /**
    * Initialize display event form.
    */
    $("#display-event-form").dialog({
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true,
        buttons: {
            Cancel: function () {
                $(this).dialog('close');
            },
            'Edit': function () {
                if (clickAgendaItem != null) {
                    //var data = agendaItem.data;
                    $(this).dialog('close');
                    $("#add-event-form").dialog('open');
                    if(clickAgendaItem.data.EventType=='Other'){
                        $("#eventTitle").val(clickAgendaItem.title);
                        $("#eventTitle").show();
                    }else
                    {
                        $("#eventType").val(clickAgendaItem.title);
                    }
                    $("#eventMessage").val(clickAgendaItem.data.Message);
                     $("#CourseID").val(clickAgendaItem.data.CourseID);
                    FillStudents();
                    var startDate = clickAgendaItem.startDate;
                    var endDate = startDate;//clickAgendaItem.endDate;
                    $("#startDate").val(startDate.getFullYear() + "-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
                    //$("#endDate").val(endDate.getFullYear() + "-" + (endDate.getMonth() + 1) + "-" + endDate.getDate());

                    $("#startHour option:eq(" + startDate.getHours() + ")").attr("selected", "selected");
                    $("#startMin option:eq(" + startDate.getMinutes() / 10 + ")").attr("selected", "selected");
                    //$("#endHour option:eq(" + endDate.getHours() + ")").attr("selected", "selected");
                    //$("#endMin option:eq(" + endDate.getMinutes() / 10 + ")").attr("selected", "selected");

                    $("#colorBackground").val(clickAgendaItem.backgroundColor);
                    $("#colorForeground").val(clickAgendaItem.foregroundColor);
                }
            },
            'Delete': function () {
                if (confirm("Are you sure you want to delete this agenda item?")) {
                    if (clickAgendaItem != null) {
                        $("#display-event-form").dialog("disable");
                        $(".ui-dialog-buttonpane button:contains('Delete')").button("disable");
                        $(".ui-dialog-buttonpane button:contains('Edit')").button("disable");
                        //var secondButton = $('.ui-dialog-buttonpane button:second');
                        //secondButton.attr('disabled', 'disabled').addClass('ui-state-disabled');
                        jQuery.ajax({
                            type: 'POST',
                            url: '<%= Url.Action("DeleteEvent", "CalendarEvent") %>',
                            data: $.toJSON({ id: clickAgendaItem.data.EventID }),
                            dataType: 'json',
                            contentType: 'application/json; charset=utf-8',
                            success: function (data) {
                                if (data.Result == true) {
                                    jfcalplugin.deleteAgendaItemById("#mycal", clickAgendaItem.agendaId);

                                    $("#display-event-form").dialog('close');
                                }

                            },
                            statusCode: {
                                404: function () {
                                    alert('page not found');
                                }
                            }
                        });

                        //jfcalplugin.deleteAgendaItemByDataAttr("#mycal","myNum",42);
                    }
                }
            }
        },
        open: function (event, ui) {
            if (clickAgendaItem != null) {
                var title = clickAgendaItem.title;
                var startDate = clickAgendaItem.startDate;
                var endDate = clickAgendaItem.endDate;
                var allDay = clickAgendaItem.allDay;
                var data = clickAgendaItem.data;
                // in our example add agenda modal form we put some fake data in the agenda data. we can retrieve it here.
                $("#display-event-form").append(
					"<br><b>" + title + "</b><br><br>"
				);
                if(data["Message"]!='null' && data["Message"]!=null)
                 $("#display-event-form").append("<b>" + data["Message"] + "<br>");
                if (allDay) {
                    $("#display-event-form").append(
						"(All day event)<br><br>"
					);
                } else {
                    $("#display-event-form").append(
						"<b>Event Date:</b> " + startDate + "<br>"
					);
                }
                if(data["Course"]!=null)
                    $("#display-event-form").append("<b>" + "Course" + ":</b> " + data["Course"] + "<br>");
                if(data["User"]!='null' && data["User"]!=null)
                     $("#display-event-form").append( "<b>" + "User" + ":</b> " + data["User"] + "<br>");
            }
        },
        close: function () {
            // clear agenda data
            $("#display-event-form").dialog("enable");
            $(".ui-dialog-buttonpane button:contains('Delete')").button("enable");
            $(".ui-dialog-buttonpane button:contains('Edit')").button("enable");
            $("#display-event-form").html("");
        }
    });

    /**
    * Initialize our tabs
    */
    $("#tabs").tabs({
        /*
        * Our calendar is initialized in a closed tab so we need to resize it when the example tab opens.
        */
        show: function (event, ui) {
            if (ui.index == 1) {
                jfcalplugin.doResize("#mycal");
            }
        }
    });
    jfcalplugin.deleteAllAgendaItems("#mycal");
        var event; var title;
					var startDate; var endDate; var startDay;
					var data;
            <% foreach(var item in Model){ %>
                title = "<%= item.Title %>";
                startDate = new Date("<%= item.StartDate.ToString() %>");
                endDate = new Date("<%= item.EndDate.ToString() %>");
                jfcalplugin.addAgendaItem(
                                                "#mycal",
                                                title,
                                                startDate,
                                                endDate,
                                                false,
                                                {
                                                    EventID: <%= item.EventID %>,
                                                    CourseID: <%= item.CourseID %>,
                                                    UserID: <%= item.UserID==null?"null":item.UserID.ToString() %>,
                                                    User: '<%= item.User==null?"null": item.User.Student.DisplayName %>',
                                                    Course: '<%= item.Course.DisplayName %>',
                                                    Message:'<%= item.Message==null?"null":item.Message %>'
                                                },
                                                {
                                                    backgroundColor: "<%= item.BGColor %>",
                                                    foregroundColor: "<%= item.TextColor %>"
                                                }
                                );
            <%  } %>

});
        </script>
</asp:Content>
